<template>
  <div>
    <el-alert
      title="添加商品信息"
      type="info"
      center
      show-icon
      :closable="false"
    ></el-alert>
    <!-- 步骤条 -->
    <!-- :active="active-0" 因为他期望得到得是数字 我们给得是字符串 用-0直接给他转换成数字 -->
    <el-steps :active="active - 0" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="height: 600px"
    >
      <!-- tab切换 -->
      <el-tabs
        v-model="active"
        :tab-position="tabPosition"
        class="tab"
        @tab-click="handleClick"
        :before-leave="leave"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form-item label="商品名称" prop="goods_name" label-width="top">
            <el-input v-model="ruleForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price" label-width="top">
            <el-input v-model="ruleForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight" label-width="top">
            <el-input v-model="ruleForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number" label-width="top">
            <el-input v-model="ruleForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label-width="top" prop="goods_cat">
            <p><font style="color: red">*</font>商品分类</p>
            <!-- 级联选择器 -->
            <el-cascader
              @change="changeId"
              v-model="result"
              :options="lists"
              :props="{
                checkStrictly: true,
                value: 'cat_id',
                label: 'cat_name',
              }"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <el-form-item
            :label="item.attr_name"
            v-for="item in manyTableData"
            :key="item.attr_id"
          >
            <!-- 复选框组 -->
            <el-checkbox-group v-model="item.newVals">
              <el-checkbox
                :label="cb"
                v-for="(cb, i) in item.attr_vals"
                :key="i"
                border
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="商品属性" name="2">
          <el-form-item
            :label="item.attr_name"
            v-for="item in onlyTableData"
            :key="item.attr_id"
          >
            <!-- 复选框组 -->
            <el-checkbox-group v-model="item.newVals">
              <el-checkbox
                :label="cb"
                v-for="(cb, i) in item.attr_vals"
                :key="i"
                border
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <!-- 上传图片 -->
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            :action="uploadURL"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            list-type="picture"
            :headers="headers"
            :on-success="handleSuccess"
          >
                       
            <el-button size="small" type="primary">点击上传</el-button>        
             
          </el-upload>
                   
          <el-dialog
            title="图片预览"
            :visible.sync="previewVisible"
            width="50%"
          >
                        < img :src="previewPath" alt="" class="previewImg" />  
                   
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <quill-editor ref="QuillEditor" v-model="ruleForm.goods_introduce" />
          <el-button type="primary" @click="addok">确认添加</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import { categorys, addlists, cates } from "../utils/api";
export default {
  data() {
    return {
      manyTableData: [],
      onlyTableData: [],
      lists: [], //列表数据
      result: [], //级联选择器
      tabPosition: "left",
      active: "0",
      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_cat: "",
        goods_introduce: "",
        pics: {},
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
      },
      uploadURL: "https://lianghj.top:8888/api/private/v1/upload",
      headers: { Authorization: localStorage.getItem("token") },
      previewPath: "",
      previewVisible: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    changeId() {
      this.ruleForm.goods_cat = this.result.join(",");
    },
    // 确定添加
    addok() {
      addlists(this.ruleForm).then((res) => {
        console.log(res);
        if (res.data.meta.status == 201) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.ruleForm.goods_name = "";
          this.ruleForm.goods_price = "";
          this.ruleForm.goods_number = "";
          this.ruleForm.goods_weight = "";
          this.ruleForm.goods_cat = "";
          this.ruleForm.goods_introduce = "";
        }
      });
    },
    ///图片上传
    handlePreview(file) {
      console.log(file);
      let url = file.response.data.url;
      this.previewPath = url;
      this.previewVisible = true;
    },
    handleRemove(file) {
      let tpm_path = file.response.data.tmp_path;
      let i = this.ruleForm.pics.findIndex((item) => item.pic == tpm_path);
      console.log(235, i);
      this.ruleForm.pics.splice(i, 1);
    },
    handleSuccess(res) {
      console.log(res.data.tmp_path);
      this.ruleForm.pics = res.data.tmp_path;
    },
    leave(activeName, oldActiveName) {
      if (this.result.length != 3) {
        this.$notify.error({
          title: "错误",
          message: "请先选择商品分类",
        });
        return false;
      }
    },
    // 切换
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == "1") {
        //动态参数
        console.log(this.result[2]);
        cates({ id: this.result[2], sel: "many" }).then((res) => {
          console.log(res);
          this.manyTableData = res.data.data;
        });
      }
      if (tab.index == "2") {
        //动态参数
        console.log(this.result[2]);
        cates({ id: this.result[2], sel: "only" }).then((res) => {
          console.log(res);
          this.onlyTableData = res.data.data;
        });
      }
    },
  },
  created() {
    categorys().then((res) => {
      console.log(res);
      this.lists = res.data.data;
    });
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.tab {
  margin: 30px 0;
}
.el-tabs__content {
  height: 600px;
}
</style>
